<template>
  <div id="level">
    <div class="pie-chart" ref="chartRef"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue';
import * as echarts from 'echarts';
import 'echarts/theme/macarons';
import { getStatisticsThree, getStatisticsTwo } from '@/api/onlineStatistics';

let chart: any;
const props = defineProps({
  time: {
    type: Object,
    default: {},
  },
  type: {
    type: String,
    default: '1',
  },
});
const { type } = props;
const total = ref(0);
watch(
  () => props.time,
  () => {
    if (chart) chart.dispose();
    getDeviceType();
  },
);
const chartRef = ref();
const getDeviceType = async () => {
  if (type == '1') {
    const res: any = await getStatisticsTwo(props.time);
    if (res.code == 200) {
      let data = [];
      for (let index = 1; index <= 5; index++) {
        let _data = res.data.filter((item: any) => {
          return item.level == index;
        });
        if (_data.length > 0) {
          total.value += _data[0].quantity;
          data.push({
            name: formatLevel(_data[0].level),
            value: _data[0].quantity,
          });
        } else {
          data.push({
            name: formatLevel(index + ''),
            value: 0,
          });
        }
      }
      chart = echarts.init(chartRef.value);
      init(data, chart);
    }
    return;
  }
  const res: any = await getStatisticsThree(props.time);
  if (res.code == 200) {
    let data = [];
    for (let index = 1; index <= 5; index++) {
      let _data = res.data.filter((item: any) => {
        return item.level == index;
      });
      if (_data.length > 0) {
        total.value += _data[0].quantity;
        data.push({
          name: formatLevel(_data[0].level),
          value: _data[0].quantity,
        });
      } else {
        data.push({
          name: formatLevel(index + ''),
          value: 0,
        });
      }
    }
    chart = echarts.init(chartRef.value);
    init(data, chart);
  }
};
getDeviceType();
const formatLevel = (val: any) => {
  switch (val) {
    case '1':
      return '0~2.9级';
    case '2':
      return '3.0~3.9级';
    case '3':
      return '4.0~4.9级';
    case '4':
      return '5.0~5.9级';
    case '5':
      return '6.0~以上';
    default:
      break;
  }
};

const init = (data: any, dom: any) => {
  let total = 0;
  data.forEach((item: any) => {
    total += item.value;
  });
  let option = {
    title: {
      text: type == '1' ? '国内震级统计' : '国外震级统计',
      textStyle: {
        color: '#fff',
      },
    },
    tooltip: {
      trigger: 'item',
      confine: true,
      formatter: (params: any) => {
        return `<div>${params.marker}${params.data.name}:<span style="display: inline-block;width: 40px;text-align: center;">${params.data.value}</span> <span>(${total == 0 ? 0 : ((params.data.value / total) * 100).toFixed(2)}%)</span></div>`;
      },
    },
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      orient: 'vertical',
      icon: 'circle',
      top: '20%',
      right: '10%',
      itemGap: 20,
      formatter: (name: any) => {
        let value = data.filter((item: any) => item.name == name)[0];
        let percent =
          total == 0 ? 0 : (Number(value.value) / Number(total)) * 100;
        return `{title|${name}}{value|${value.value}}{percent|(${percent.toFixed(
          2,
        )}%)}`;
      },
      data,
      textStyle: {
        padding: [2, 0, 0, 0],
        color: '#fff',
        rich: {
          title: {
            width: 60,
          },
          value: {
            width: 30,
            align: 'center',
          },
          percent: {
            width: 60,
            align: 'left',
          },
        },
      },
    },
    series: [
      {
        name: type == '1' ? '国内' : '国外',
        type: 'pie',
        center: ['35%', '55%'],
        radius: ['40%', '60%'],
        avoidLabelOverlap: false,
        // itemStyle: { borderColor: '#fff', borderWidth: 2 },
        color: ['#808080', '#1890ff', '#fadb14', '#faad14', '#f5222d'],
        label: {
          show: true,
          icon: 'circle',
          padding: [10, 0],
          // alignTo: 'labelLine', // ! 文字对齐方式
          formatter: (params: any) => {
            return `{t|${params.data.name}\n ${params.data.value}个 (${total == 0 ? 0 : ((params.data.value / total) * 100).toFixed(2)}%)}`;
          },
          rich: {
            t: {
              color: '#eefaff',
              lineHeight: 20,
              fontSize: 12,
              align: 'left',
            },
          },
        },
        data,
      },
    ],
  };
  dom.setOption(option);
  addEventListener('resize', function () {
    dom.resize();
  });
};
</script>

<style lang="scss" scoped>
#level {
  width: 100%;
  // padding: 10px 20px;
  // background: #ffffff;

  height: 20vh;
  // margin-right: 20px;
  box-sizing: border-box;
  // overflow: hidden;
  // box-shadow: 1px 0px 10px 14px rgba(228, 230, 225, .6);
  // -webkit-box-shadow: 1px 0px 10px 14px rgba(228, 230, 225, .6);

  .pie-chart {
    width: 100%;
    height: 100%;
  }
}
</style>
